import React, { PropTypes } from 'react';
import { Image, View, Text } from 'react-native'
import {StackNavigator, TabNavigator} from 'react-navigation';
import { AssetImages } from '../constants'
import { Px } from '../utils'

import My from '../layouts/user/My'
import Login from '../layouts/user/Login'
import Register from '../layouts/user/Register'
import MyPet from '../layouts/user/MyPet'
import MyWork from '../layouts/user/MyWork'
import MyFollow from '../layouts/user/MyFollow'
import MyFavirate from '../layouts/user/MyFavirate'
import PersonMessage from '../layouts/user/PersonMessage'

import HomePage from '../layouts/index/HomePage'
import PersonalPage from '../layouts/index/PersonalPage'

import Rank from '../layouts/rank/Rank'
import Friends from '../layouts/friend/Friends'
import VideoAdd from '../layouts/add/VideoAdd'
import AddPet from '../layouts/add/AddPet'

import VideoDetail from '../components/VideoDetail'

//----------------------------------- 底部Tab -----------------------------------

const navigationOptions = {header: null};

const TabNav = TabNavigator(
    {
        HomePage: {
            screen: HomePage,
            navigationOptions: {
                header: null,
                tabBarLabel: '首页',
                tabBarIcon: ({ tintColor, focused }) => {
                    if (focused) {
                        return (
                            <View style={{ alignItems: 'center', justifyContent: 'center'}}>
                                <Image
                                    source={AssetImages.HOME_SELECT_ICON}
                                    style={{ width: Px(40), height: Px(40) }}
                                />
                                <Text style={{fontSize: Px(18), marginTop: Px(10)}}>首页</Text>
                            </View>
                            
                        )
                    } else {
                        return (
                            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                                <Image
                                    source={AssetImages.HOME_ICON}
                                    style={{ width: Px(40), height: Px(40) }}
                                />
                                <Text style={{ fontSize: Px(18), marginTop: Px(10) }}>首页</Text>
                            </View>
                            
                        )
                    }
                },
            }
        },
        Rank: {
            screen: Rank,
            navigationOptions: {
                header: null,
                tabBarLabel: '排行榜',
                tabBarIcon: ({ tintColor, focused }) => {
                    if (focused) {
                        return (
                            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                                <Image
                                    source={AssetImages.RANK_SELECT_ICON}
                                    style={{ width: Px(40), height: Px(40) }}
                                />
                                <Text style={{ fontSize: Px(18), marginTop: Px(10) }}>排行榜</Text>
                            </View>
                        )
                    } else {
                        return (
                            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                                <Image
                                    source={AssetImages.RANK_ICON}
                                    style={{ width: Px(40), height: Px(40) }}
                                />
                                <Text style={{ fontSize: Px(18), marginTop: Px(10) }}>排行榜</Text>
                            </View>
                        )
                    }
                },
            }
        },
        VideoAdd: {
            screen: VideoAdd,
            navigationOptions: {
                header: null,
                tabBarOptions: {
                    showLabel: false
                },
                tabBarIcon: ({ tintColor, focused }) => {
                    return <Image
                        source={AssetImages.ADD_ICON}
                        style={{width: Px(60), height: Px(60)}}
                    />
                },
            }
        },
        Friends: {
            screen: Friends,
            navigationOptions: {
                header: null,
                tabBarLabel: '宠友',
                tabBarIcon: ({ tintColor, focused }) => {
                    if (focused) {
                        return (
                            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                                <Image
                                    source={AssetImages.PET_SELECT_ICON}
                                    style={{ width: Px(40), height: Px(40) }}
                                />
                                <Text style={{ fontSize: Px(18), marginTop: Px(10) }}>宠友</Text>
                            </View>
                        )
                    } else {
                        return (
                            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                                <Image
                                    source={AssetImages.PET_ICON}
                                    style={{ width: Px(40), height: Px(40) }}
                                />
                                <Text style={{ fontSize: Px(18), marginTop: Px(10) }}>宠友</Text>
                            </View>
                        )
                    }
                },
            }
        },
        My: {
            screen: My,
            navigationOptions: {
                tabBarLabel: '我',
                header: null,
                tabBarIcon: ({ tintColor, focused }) => {
                    if (focused) {
                        return (
                            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                                <Image
                                    source={AssetImages.MY_SELECT_ICON}
                                    style={{ width: Px(40), height: Px(40) }}
                                />
                                <Text style={{ fontSize: Px(18), marginTop: Px(10) }}>我</Text>
                            </View>
                        )
                    } else {
                        return (
                            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                                <Image
                                    source={AssetImages.MY_ICON}
                                    style={{ width: Px(40), height: Px(40) }}
                                />
                                <Text style={{ fontSize: Px(18), marginTop: Px(10) }}>我</Text>
                            </View>
                        )
                    }
                },
            },
        },
    }, {
        tabBarPosition: 'bottom',
        animationEnabled: false,
        swipeEnabled: false,
        //lazy: true,
        initialRouteName: 'HomePage',
        tabBarOptions: {
            activeTintColor: '#FC3E30', // 文字和图片选中颜色
            inactiveTintColor: '#939393', // 文字和图片未选中颜色
            showIcon: true,
            showLabel: false,
            style: {
                backgroundColor: '#fff',
                borderTopColor: '#ddd',
                borderTopWidth: 1,
            },
            indicatorStyle: {
                height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
            },
            labelStyle: {
                fontSize: 12, // 文字大小
                paddingTop: 0,
                marginTop: 0,
            },
            tabStyle: {
                marginTop: 5,
                height: 45,
            },
        }

    }
);



const StacksOverTabs = StackNavigator({
    Root: {
        screen: TabNav,
    },
    Login: {
        screen: Login,
        navigationOptions: {
            header: null,
        }
    },
    Register: {
        screen: Register,
        navigationOptions: {
            header: null,
        }
    },
    PersonalPage: {
        screen: PersonalPage,
        navigationOptions: {
            header: null,
        }
    },
    MyPet: {
        screen: MyPet,
        navigationOptions: {
            header: null,
        }
    },
    AddPet: {
        screen: AddPet,
        navigationOptions: {
            header: null,
        }
    },
    MyWork: {
        screen: MyWork,
        navigationOptions: {
            header: null,
        }
    },
    MyFollow: {
        screen: MyFollow,
        navigationOptions: {
            header: null,
        }
    },
    MyFavirate: {
        screen: MyFavirate,
        navigationOptions: {
            header: null,
        }
    },
    PersonMessage: {
        screen: PersonMessage,
        navigationOptions: {
            header: null,
        }
    },
    VideoDetail: {
        screen: VideoDetail,
        navigationOptions: {
            header: null,
        }
    }
}, {
    headerStyle: {  // 导航栏相关设置项
        style: {
            backgroundColor: '#f53626'
        },
        headerMode: 'screen',
    },
});

export default StacksOverTabs;
